<template>
  <div class="edu-page-warp">
    <DesignCard :title="$t('graduationDesign.assignSubject')" :showExpand="false">
      <el-row>
        <table class="special-assign" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="td-label">{{$t('graduationDesign.studentId')}}</td>
              <td class="td-value">{{assignForm.studentId}}</td>
              <td class="td-label">{{$t('graduationDesign.college')}}</td>
              <td class="td-value">{{assignForm.collegeIdI18n}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.name')}}</td>
              <td class="td-value">{{assignForm.studentName}}</td>
              <td class="td-label">{{$t('graduationDesign.major')}}</td>
              <td class="td-value">{{assignForm.subjectIdI18n}}</td>
            </tr>
            <tr>
              <td class="td-label">{{$t('graduationDesign.graduationYear')}}</td>
              <td class="td-value">{{assignForm.grade}}</td>
              <td class="td-label">{{$t('graduationDesign.direction')}}</td>
              <td class="td-value">{{assignForm.directionName}}</td>
            </tr>
          </tbody>
        </table>
      </el-row>
    </DesignCard>

    <condition-card label-width="110px" @reset="reset" @search="searchList">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('graduationDesign.subjectCollege')">
            <el-select v-model="queryForm.condition.collegeId" filterable @change="handleCollegeChange" class="search-item" clearable>
              <el-option v-for="item in insource.collegeOptions" :key="item.collegeId" :label="item.collegeIdI18n" :value="item.collegeId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('graduationDesign.subjectMajor')">
            <el-select v-model="queryForm.condition.subjectId" filterable class="search-item"  clearable>
              <el-option v-for="item in insource.subjectOptions" :key="item.subjectId" :label="item.subjectName" :value="item.subjectId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('graduationDesign.subjectName')">
            <el-input v-model="queryForm.condition.projectName" :placeholder="$t('graduationDesign.pleaseEnter')" class="search-item"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>

    <el-card shadow="never">
      <div class="edu-page-title">{{$t('graduationDesign.subjectList')}}</div>
      <div class="edu-opertion-bar">
        <div class="float-left">
          <el-input v-model="queryForm.condition.teacherName" :placeholder="$t('graduationDesign.pleaseEnterTeaSearch')" style="width:300px" clearable @keyup.enter.native="searchList">
            <i slot="suffix" class="el-icon-search" style="margin-top:10px;cursor:pointer" @click="searchList" />
          </el-input>
        </div>
      </div>
      <el-table ref="subjectListTable" :data="subjectList" @row-click="handleCourseRowClick" size="mini" stripe tooltip-effect="light">
        <el-table-column :label="$t('graduationDesign.choose')" min-width="60">
          <template slot-scope="scope">
            <el-radio v-model="currentRowId" :label="scope.row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectName')" prop="projectName" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.courseType')" prop="projectType" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.tutor')" prop="teacherName" min-width="90" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.teacherCollege')" prop="teacherCollegeIdI18n" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectCollege')" prop="collegeIdI18n" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectMajor')" prop="subjectIdI18n" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('graduationDesign.subjectDerection')" prop="direction" min-width="120" show-overflow-tooltip></el-table-column>
      </el-table>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-pagination :current-page.sync="queryForm.pageNum_" :page-sizes="[20, 50, 100, 500, 1000]" :page-size="queryForm.pageSize_" :total="queryForm.total_" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" style="float: right;margin:10px 60px 0 0;"></el-pagination>
        </div>
      </div>
      <div class="edu-opertion-bar assign-bottom">
        <div class="float-right">
          <el-button @click="onCancel">{{$t('graduationDesign.cancel')}}</el-button>
          <el-button type="primary" @click="onSubmit">{{$t('graduationDesign.confirm')}}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/reviewSubject";

export default {
  name: 'assignSubjectList',
  props: {
    assignForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      api: API,
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition: {
          collegeId: '',
          subjectId: '',
          projectName: '',
          teacherName: '',
          isSpecial: 1
        }
      },
      subjectList: [],
      insource: {
        collegeOptions: [],
        subjectOptions: []
      },
      currentRowId: "",
      selectedCourseObj: {} // 选择的课程信息
    };
  },
  mounted() {
    this.getCollege();
    this.searchList();
    this.currentRowId = this.assignForm.infoId;
    this.queryForm.condition.collegeId = this.assignForm.collegeId;
    this.handleCollegeChange(this.assignForm.collegeId);
    this.queryForm.condition.subjectId = this.assignForm.subjectId;
  },
  methods: {
    // 查学院
    getCollege() {
      this.api.getCollege().then(res => {
        this.insource.collegeOptions = res;
      });
    },
    // 根据毕业年份学院查专业
    handleCollegeChange(val) {
      if (val && this.assignForm.grade) {
        const params = {
          grade: this.assignForm.grade,
          college: val
        };
        this.api.getSubject(params).then(res => {
          this.insource.subjectOptions = res.data;
        }).catch();
      }
    },
    searchList() {
      this.subjectList = [];
      this.currentRowId = "";
      this.selectedCourseObj = {};
      this.queryForm.condition.studentId = this.assignForm.studentId;
      this.api.getSubjectList(this.queryForm).then(({ data }) => {
        this.subjectList = data.list;
        this.queryForm.pageNum_ = data.pageNum;
        this.queryForm.total_ = data.total;
      });
    },
    reset() {
      this.queryForm.pageNum_ = 1;
      this.queryForm.pageSize_ = 20;
      this.queryForm.condition.projectName = "";
      this.queryForm.condition.teacherName = "";
      this.searchList();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val;
      this.searchList();
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val;
      this.searchList();
    },
    // 单选按钮选中
    handleCourseRowClick(row) {
      this.currentRowId = row.id;
      this.selectedCourseObj = { ...row };
    },
    onSubmit() {
      if (!this.selectedCourseObj.id) {
        this.$eduAlert(this.$t('graduationDesign.assignSubjectSubmitTips'), this.$t('graduationDesign.prompt'));
        return false;
      }
      const data = {
        infoId: this.selectedCourseObj.id,
        studentId: this.assignForm.studentId
      };
      if (this.assignForm.actionType === "EDIT") {
        data.id = this.assignForm.id
      }
      this.$emit("assign-submit", data, this.assignForm.actionType);
    },
    onCancel() {
      this.$emit("assign-cancel");
    }
  }
}
</script>
<style lang="scss" scoped>
.special-assign {
	margin: 10px 10px;
    margin-bottom: 32px;
	width: 100%;
	border-color: #c0c4cc;
	border-style: solid;
	border-width: 0 1px 1px 0;
	td {
		padding: 6px;
		border-color: #c0c4cc;
		border-style: solid;
		border-width: 1px 0 0 1px;
	}
	.td-label {
		width: 15%;
		text-align: right;
		background-color: #f5f7fa;
	}
  .td-value {
		width: 35%;
    padding-left: 15px;
	}
}
.search-item {
    width: 100%;
}
.assign-bottom {
    margin-top: 20px;
}
</style>
